<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .content {
      width: 1200px;
      margin: 30px auto;
    }

    .image-list {
      width: 200px;
      float: left;
      margin-right: 40px;
    }

    ul {
      width: 200px;
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      width: 190px;
      height: 190px;
      border: 5px solid gray;
      cursor: pointer;
    }

    li img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .canvas-container {
      float: left;
    }

    

    .setting-area {
      float: left;
      margin-left: 20px;
    }

    .setting-area div {
      margin-top: 20px;
    }

    .result {
      background: lightcyan;
      min-height: 100px;
    }
    #canvas {
      background:lightcyan;
      cursor: pointer ;
    }
  </style>

  <body>
    <div class="content">
      <div class="canvas-container">
        <div>
          <canvas id="canvas" width="500" height="500">不支持Canvas</canvas>
        </div>
      </div>
      <div class="setting-area">
        <button id="eraseAllButton">擦除全部</button>
        <div>
          strokeStyleSelect:
          <select id="strokeStyleSelect">
            <option value="red">red</option>
            <option value="blue">blue</option>
            <option value="yellow">yellow</option>
          </select>
        </div>
        <div>
          fillStyleSelect:
          <select id="fillStyleSelect">
            <option value="red">red</option>
            <option value="blue">blue</option>
            <option value="yellow">yellow</option>
          </select>
        </div>
        <div>
          sidesSelect:
          <select id="sidesSelect">
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
          </select>
        </div>
        <div>
          <input type="checkbox" id="fillCheckbox" checked/> 是否填充
          <input type="checkbox" id="editCheckbox" /> 是否编辑
        </div>
      </div>
    </div>
  </body>
  <script src="./index.js"></script>
</html>
